<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>~~~{title!}</title>
</head>
<body>
  
    <!-- <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="renderer" content="webkit">
    <meta name="theme-color" content="~~~{settings.google_color!'#fff'}">
    <meta name="author" content="~~~{user.nickname!}" />
    <meta name="keywords" content="~~~{meta_keywords!}"/>
    <meta name="description" content="~~~{meta_description!}" /> -->
    <!-- <link href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet"/> -->
    <link rel="stylesheet" href="source/css/font-awesome/font-awesome.min.css">
    <link href="./source/css/blog_basic.min.css?version=88107691fe" rel="stylesheet">
    <link href="./source/css/style.min.css" type="text/css" rel="stylesheet" />

    <!-- <#if is_post?? || is_sheet??> -->
        <link href="//cdn.jsdelivr.net/npm/prismjs@1.19.0/themes/prism~~~{settings.code_pretty!}.min.css" type="text/css" rel="stylesheet" />
        <!-- <script type="text/javascript" src="//cdn.jsdelivr.net/npm/prismjs@1.19.0/prism.min.js"></script> -->
        <script type="text/javascript" src="source/js/prism.min.js"></script>
        
        <style>
            .page-top {
                width: 60%;
                position: fixed;
                right: 0;
                top: 0;
                z-index: 3;
                background-color: #fff;
                height: 60px;
                border-bottom: 1px solid #f2f2f2;
            }
            table {
                border-spacing: 0;
                border-collapse: collapse;
                margin-top: 0;
                margin-bottom: 16px;
                display: block;
                width: 100%;
                overflow: auto;

            }
            table th {
                font-weight: 600;
            }
            table th,
            table td {
                padding: 6px 13px;
                border: 1px solid #dfe2e5;
            }
            table tr {
                background-color: #fff;
                border-top: 1px solid #c6cbd1;
            }
            table tr:nth-child(2n) {
                background-color: #f6f8fa;
            }
        </style>
    <!-- </#if> -->

    <link rel="alternate" type="application/rss+xml" title="atom 1.0" href="~~~{atom_url!}">
    <style>
        /* <#if !settings.post_title_uppper!true> */
        /* .post .post-title h3 {
            text-transform: none;
        } */
        /* </#if> */
        /* <#if !settings.blog_title_uppper!true> */
        /* .sidebar .logo-title .title h3 {
            text-transform: none;
        } */
        /* </#if> */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
            background-color: #eee;
        }
        ::-webkit-scrollbar-thumb {
            background-color: ~~~{settings.scrollbar!'#3798e8'};
        }
        ::-webkit-scrollbar-track {
            background-color: #eee;
        }
        /* ~~~{settings.custom!} */
    </style>
</head>
<body>


<!-- <#list posts.content as post> -->
    <!-- <div class="post animated fadeInDown">
        <div class="post-title">
            <h3>
                <a href="~~~{post.fullPath!}">~~~{post.title}</a>
            </h3>
        </div>
        <h2>post-content</h2>
        <div class="post-content">
            <div class="p_part">
                <p>~~~{post.summary!}...</p>
            </div>
            <div class="p_part">
                <p></p>
            </div>
        </div>
        <div class="post-footer">
            <div class="meta">
                <div class="info">
                    <i class="fa fa-sun-o"></i>
                    <span class="date">~~~{post.createTime?string("yyyy-MM-dd")}</span>
                    <i class="fa fa-comment-o"></i>
                    <a href="~~~{post.fullPath!}#comment_widget">Comments</a>
                    <#if post.tags?size gt 0>
                        <i class="fa fa-tag"></i>
                        <#list post.tags as tag>
                            <a href="~~~{tag.fullPath}" class="tag">&nbsp;~~~{tag.name}</a>
                        </#list>
                    </#if>
                </div>
            </div>
        </div>
    </div> -->
    <!-- ******* -->
<!-- </#list> -->


<div class="sidebar animated fadeInDown">
    <div class="logo-title">
        <div class="title">
            <img src="<#if blog_logo?? && blog_logo!=''>${blog_logo!}<#else>${user.avatar!}</#if>" style="width:127px;<#if settings.avatar_circle!true>border-radius:50%</#if>" />
            <h3 title="">
                <a href="${blog_url!}">${blog_title!}</a>
            </h3>
            <div class="description">
                <#if settings.hitokoto!false>
                    <p id="yiyan">获取中...</p>
                <#else >
                    <p>${user.description!}</p>
                </#if>
            </div>
        </div>
    </div>
    <!-- <#include "social-list.ftl"> -->
    <ul class="social-links">

    <li>
        <a target="_blank" href="${atom_url!}">
            <i class="fa fa-rss"></i>
        </a>
    </li>

    <li>
        <a target="_blank" href="https://twitter.com/${settings.twitter}">
            <i class="fa fa-twitter"></i>
        </a>
    </li>

    <li>
        <a target="_blank" href="https://www.facebook.com/${settings.facebook}">
            <i class="fa fa-facebook"></i>
        </a>
    </li>


    <li>
        <a target="_blank" href="https://www.instagram.com/${settings.instagram}">
            <i class="fa fa-instagram"></i>
        </a>
    </li>



    <li>
        <a target="_blank" href="https://dribbble.com/${settings.dribbble}">
            <i class="fa fa-dribbble"></i>
        </a>
    </li>
    <li>
        <a target="_blank" href="https://weibo.com/${settings.weibo}">
            <i class="fa fa-weibo"></i>
        </a>
    </li>



</ul>

    <div class="footer">
        <a target="_blank" href="#">
            <!-- 不允许修改该主题信息，也不能删除。 -->
            <span>Designed by </span>
            <a href="https://www.caicai.me">CaiCai</a>
            <div class="by_halo">
                <a href="https://github.com/halo-dev/halo" target="_blank">Proudly published with Halo&#65281;</a>
            </div>
            <div class="footer_text">
                <@global.footer_info />..................
            </div>
        </a>
    </div>
</div>




<#--首页 index -->

<div class="main">
<!-- page-top.ftl  -->
<div class="page-top animated fadeInDown">
    <div class="nav">
        <!-- <@menuTag method="list">
            <#list menus?sort_by('priority') as menu> -->
                <li>
                    <a href="~~~{menu.url!}" target="~~~{menu.target!}">~~~{menu.name!} </a>
                </li> 
                 <li>
                    <a href="~~~{menu.url!}" target="~~~{menu.target!}">~~~{menu.name!} </a>
                </li>
                <li>
                    <a href="~~~{menu.url!}" target="~~~{menu.target!}">~~~{menu.name!} </a>
                </li>
            <!-- </#list>
        </@menuTag> -->
    </div>
    <div class="information">
        <div class="back_btn">
            <li>
                <a onclick="window.history.go(-1)" style="display: none" class="fa fa-chevron-left"></a>
            </li>
        </div>
        <div class="avatar">
            <img src="~~~{settings.icon!'~~~{user.avatar!}'}" />
        </div>
        <div class="searchbox">
            <form method="get" action="/search" role="search">
                <input class="searchtxt" type="search" name="keyword" placeholder="Search" required>
                <a class="searchbtn" href="#"><i class="fa fa-search"></i></a>
            </form>
        </div>
    </div>
</div>


    <div class="autopagerize_page_element">
        <div class="content">
<!--    引入文章 entry 遍历显示        -->
            <!-- <post-entry.ftl></post-entry.ftl> -->
<!-- <#list posts.content as post> -->
    <div class="post animated fadeInDown">
        <div class="post-title">
            <h3>
                <a href="~~~{post.fullPath!}">~~~{post.title}</a>
            </h3>
        </div>
        <h2>post-content</h2>
        <div class="post-content">
            <div class="p_part">
                <p>~~~{post.summary!}...</p>
            </div>
            <div class="p_part">
                <p></p>
            </div>
        </div>
        <div class="post-footer">
            <div class="meta">
                <div class="info">
                    <i class="fa fa-sun-o"></i>
                    <span class="date">~~~{post.createTime?string("yyyy-MM-dd")}</span>
                    <i class="fa fa-comment-o"></i>
                    <a href="~~~{post.fullPath!}#comment_widget">Comments</a>
                    <#if post.tags?size gt 0>
                        <i class="fa fa-tag"></i>
                        <#list post.tags as tag>
                            <a href="~~~{tag.fullPath}" class="tag">&nbsp;~~~{tag.name}</a>
                        </#list>
                    </#if>
                </div>
            </div>
        </div>
    </div>
<!-- </#list> -->

              <!--        页数大于 1 显示导航条        -->

        </div>
    </div>
</div>
          
          
          
<@footer></@footer>
<#--    底部       -->




</body>
</html>


</body>
<!-- <script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@1.9.1/jquery.min.js"></script> -->
<script type="text/javascript" src="./source/js/jquert.min.js"></script>
<script type="text/javascript">
    var url = location.href;
    var urlstatus = false;
    ~~~(".nav li a").each(function () {
        if ((url + '/').indexOf(~~~(this).attr('href')) > -1 && ~~~(this).attr('href') != '/') {
            ~~~(this).addClass('current');
            urlstatus = true;
        } else {
            ~~~(this).removeClass('current');
        }
    });
    if (!urlstatus) {
        ~~~(".nav li a").eq(0).addClass('current');
    }
</script>

<script>

    // <#if settings.hitokoto!false>
    // 一言
	  var xhr = new XMLHttpRequest();
	  xhr.open('get', 'https://v1.hitokoto.cn');
	  xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
              var data = JSON.parse(xhr.responseText);
              var yiyan = document.getElementById('yiyan');
              yiyan.innerText = data.hitokoto+"        -「"+data.from+"」";
          }
      };
	  xhr.send();
    // </#if>


</script>
</html>